import React, { Component } from 'react';

import axios from 'axios';
import {HashRouter, BrowserRouter, Route, Link} from 'react-router-dom';

import logo from './logo.svg';
import './App.css';

import Bundle from './bundle.js';

import Home from './components/Home';
//import Product from './components/Product';
//import About from './components/About';

const Product = (props) => (
  <Bundle load={() => import('./components/Product')}>
    {(Product) => <Product {...props}/>}
  </Bundle>
);

const About = (props) => (
  <Bundle load={() => import('./components/About')}>
    {(About) => <About {...props}/>}
  </Bundle>
);

const Operator = (props) => (
  <Bundle load={() => import('./components/operator/Operator')}>
    {(Operator) => <Operator {...props}/>}
  </Bundle>
);

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <div className="navbar">
            <div className="navbar-container">
              <div className="navbar-header">
                <img src={logo} className="App-logo" alt="logo" />
                Welcome to React !
              </div>
            </div>
          </div>

          <div className="main-container">
            <div className="sidebar">
              <div className="sidebar-shortcuts">
                menu list
              </div>
              <ul className="menu-list">
                <li><Link to="/">首页</Link></li>
                <li><Link to="/product">产品</Link></li>
                <li><Link to="/about">我们</Link></li>
                <li><Link to="/operator">operators</Link></li>
              </ul>
            </div>

            <div className="main-content">
              <div className="main-content-inner">
                <div className="breadcrumbs" id="breadcrumbs">
                  Home
                </div>
                <div className="page-content">
                  <div className="page-content-area">
                    <Route exact path="/" component={Home}/>
                    <Route path="/product" component={Product}/>
                    <Route path="/about" component={About}/>
                    <Route path="/operator" component={Operator}/>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="footer">
              <div className="footer-inner">
                <div className="footer-content">
                  bottom
                </div>
              </div>
            </div>
          </div>
        </div>
      </HashRouter>
    );
  }
  
  componentDidMount() {
  }
}

export default App;
